<template>
	<view>
		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<view class="status_bar"></view>
		<!-- #endif -->
		<view class="head" @click="goinde">
			<image src="../../static/images/arrow_left.png" mode=""></image>
			<view class="">订单详情</view>
			<view class="f32"></view>
		</view>
		<view class="details">
			<view class="detailsTop">
				<view class="">订单号：{{ arry.order_no }}</view>
				<view class="">
					<image :src="fan()" mode=""></image>
				</view>
			</view>
			<view class="detailsBot">
				<view class="photo">{{ arry.customer_name.charAt(0) }}</view>
				<view class="boxt">
					<view class="boxTop">{{ arry.customer_name }}</view>
					<view class="boxbot">应收欠款:￥{{ ate.receivable }}</view>
				</view>
				<button type="primary" @click="gopay">收款</button>
			</view>
		</view>
		<view class="address" @click="addre">
			<view class="addressLeft">地址：{{ address }}</view>
			<image src="../../static/images/arrow_right.png" mode=""></image>
		</view>
		<view class="singlePerson">
			<view class="singlePersonTop">
				<view class="left">开单人：{{ arry.user_name }}</view>
				<view class="right">{{ arry.create_time | birtime }}</view>
			</view>
			<view class="singlePersonBot">
				订单金额：¥{{ arry.payable }}
				<!-- <text>以优惠88.0元)</text> -->
			</view>
		</view>
		<!-- 		<view class="shop">
			<view class="shopTop">
				<view class="">
					总要货：99（
					<text>总欠货: 22</text>
					)
				</view>
				<view class="">
					<text class="blue">统一展开</text>
					<image src="../../static/images/arrow_down.png" mode=""></image>
				</view>
			</view>
		</view> -->
		<!-- 商品 -->
		<view class="" v-for="(item, index) in goodList">
			<view class="">
				<view class="shopCenter">
					<image :src="item.cover" mode=""></image>
					<view class="bot">
						<view class="botTop">
							<view class="botLeft">{{ item.title }}(商品名称）</view>
							<!-- <view class="botRight hui">未入库:2</view> -->
						</view>
						<view class="botTop" style="margin-top: 53rpx;">
							<view class="botLeft">
								总要货数：{{ allowe_num(item) }}（
								<text>¥{{ allMoney(item) }}</text>
								)
							</view>
							<view class="botRight blue" @click="ShowBox(index)">
								{{ item.show == true ? '收起' : '展开' }}
								<image :src="zhanImage" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view class="box" v-show="item.show">
					<view class="boxTop">
						<view class="boxLeft">规格(库存）</view>
						<view class="boxCenter">欠货</view>
						<view class="boxRight">退欠货数</view>
					</view>
					<view class="boxbot" v-for="child in item.product_list">
						<view class="boxLeft">{{ child.spec_data[0] + '/' + child.spec_data[1] }}</view>
						<view class="boxCenter">{{ child.operate_num }}(¥{{ child.sell_price }})</view>
						<view class="boxRight">{{ child.owe_num }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="remark">
			<view class="">备注</view>
			<input type="text" value="" placeholder="某某备注" />
		</view>
		<view class="bott" v-if="showRu">
			<view class="botOne" @click="goSearch">
				<image src="../../static/client/0001.png" mode=""></image>
				退欠货
			</view>
			<view class="botOne" @click="closeDan">
				<image src="../../static/client/0003.png" mode=""></image>
				关闭订单
			</view>
			<view class="botOne" @click="gofa">
				<image src="../../static/client/0002.png" mode=""></image>
				发货
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arry: '',
				ate: '',
				allUser: '',
				Showbox: false,
				showZhan: '展开',
				zhanImage: '../../static/slice/1.png',
				showRu: false,
				customer_id: '',
				useAddindex: '',
				att: '0',
				add: [],
				goodList: [],
				address: ''
			};
		},
		onShow() {
			console.log(this.goodList)
			this.arry = uni.getStorageSync('line');
			this.useAddindex = uni.getStorageSync('useAddindex');
			// console.log(this.arry);
			this.customer_id = this.arry.customer_id;
			if (this.arry.order_type == 1) {
				this.showRu = true;
			}
			this.qian();
			// console.log(this.add);
			this.shopAll();
		},
		methods: {
			fan(item) {
				if (this.arry.order_type == 1) {
					return '../../static/images/icon_staple.png';
				}
				if (this.arry.order_type == 2) {
					return '../../static/client/tui.png';
				}
				if (this.arry.order_type == 3) {
					return '../../static/slice/gai.png';
				}
			},
			goinde() {
				uni.switchTab({
					url: '../shop/indent'
				})
			},
			goSearch() {
				uni.setStorage({
					key: 'goodlist',
					data: this.goodList
				});
				uni.setStorage({
					key: 'tuiqian',
					data: this.arry
				});
				uni.setStorage({
					key: 'User',
					data: this.ate
				});
				uni.navigateTo({
					url: 'Arrearage?id=' + JSON.stringify(this.ate)
				});
			},
			addre() {
				if (this.arry.order_type == 1) {
					uni.navigateTo({
						url: 'useAdd'
					});
					uni.setStorage({
						key: 'uat',
						data: this.ate
					});
				}
				if (this.arry.order_type == 2) {
					uni.showToast({
						title: '非销售单不能修改',
						icon: 'none',
						duration: 1500
					});
				}
				if (this.arry.order_type == 3) {
					uni.showToast({
						title: '非销售单不能修改',
						icon: 'none',
						duration: 1500
					});
				}
			},


			allMoney(item) {
				// console.log(item);
				let c = 0;
				item.product_list.forEach(item => {
					c = item.operate_num * item.sell_price + c;
				});
				return c;
			},
			ShowBox(index) {
				this.goodList[index].show = !this.goodList[index].show;

				this.$set(this.goodList, index, this.goodList[index]);
				// console.log(this.goodList[index].show);
			},
			gopay() {
				uni.navigateTo({
					url: 'payment'
				});
				  uni.setStorageSync('User', this.ate);
				  uni.setStorageSync('se', 1);
			
			},
			qian() {
				this.$ajax('api/v1.customer/index', {})
					.then(res => {
						// console.log(res);
						this.allUser = res.result;
						// console.log(this.allUser);
						this.allUser.forEach((item, i) => {
							if (item.customer_id == this.customer_id) {
								// console.log(i);
								this.ate = this.allUser[i];
							}
						});
						// console.log(this.ate);
					})
					.catch(res => {
						console.log(Error);
					});
			},
			allowe_num(item) {
				// console.log(item);
				let c = 0;

				item.product_list.forEach(item => {
					c = item.owe_num + c;
				});
				return c;
			},
			closeDan() {
				this.$ajax('api/v1.order/close', {
					order_id: this.arry.order_id
				}).then((res) => {
					// console.log(res);
					uni.switchTab({
						url: '../shop/indent'
					})
				}).catch(res => {
					console.log(Error);
				})
			},
			shopAll() {
				this.$ajax('api/v1.order/info', {
						order_id: this.arry.order_id,

					})
					.then(res => {

						this.goodList = res.result.goods_list;
						// this.$store.commit('GOOD_LIST',this.goodList)
						// console.log(this.goodList);
						// console.log(this.goodList);
						this.$store.commit('GOOD_LIST', this.goodList)
						this.goodList.forEach(item => {
							item.show = false;
						});
						console.log(this.goodList);
						this.address = JSON.parse(res.result.address)


					})
					.catch(res => {
						console.log(Error);
						console.log(123);
					});
			},

			gofa() {
				uni.setStorage({
					key: 'ate',
					data: this.goodList
				});
				uni.setStorage({
					key: 'User',
					data: this.ate
				});
				uni.navigateTo({
					url: 'shipments?id=' + JSON.stringify(this.ate)
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f7f4f8;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.head {
		height: 88rpx;
		line-height: 88rpx;
		background-color: #249af6;
		color: #ffffff;
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;

		image {
			width: 22rpx;
			height: 39rpx;
			margin-top: 25rpx;
		}
	}

	.details {
		// height: 269rpx;
		margin-top: 20rpx;
		background-color: #ffffff;
		padding: 0 32rpx;

		.detailsTop {
			height: 103rpx;
			line-height: 103rpx;
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			border-bottom: 2rpx #eeeeee solid;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.detailsBot {
			padding-top: 40rpx;
			padding-bottom: 40rpx;
			display: flex;
			position: relative;

			.photo {
				width: 100rpx;
				height: 100rpx;
				overflow: hidden;
				border-radius: 50%;
				background-color: #249af6;
				color: #ffffff;
				text-align: center;
				line-height: 100rpx;
			}

			.boxt {
				margin-left: 34rpx;

				.boxTop {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
				}

				.boxbot {
					margin-top: 37rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(102, 102, 102, 1);
				}
			}
		}

		button {
			width: 116rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			position: relative;
			left: 50rpx;
		}
	}

	.address {
		height: 110rpx;
		line-height: 110rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		background-color: #ffffff;
		margin-top: 20rpx;

		image {
			margin-top: 38rpx;
			width: 18rpx;
			height: 33rpx;
		}
	}

	.singlePerson {
		margin-top: 20rpx;
		padding: 38rpx 29rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		font-size: 30rpx;
		color: rgba(51, 51, 51, 1);
		font-family: PingFang SC;
		font-weight: 500;

		.singlePersonTop {
			display: flex;
			justify-content: space-between;

			.right {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(102, 102, 102, 1);
			}
		}

		.singlePersonBot {
			margin-top: 30rpx;
		}
	}

	text {
		color: #f64444;
	}

	.blue {
		color: #249af6;
	}

	.hui {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}

	.shop {
		padding-left: 29rpx;
		padding-right: 29rpx;
		margin-top: 20rpx;
		background-color: #ffffff;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);

		.shopTop {
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #cccccc;

			image {
				width: 17rpx;
				height: 10rpx;
				margin-left: 10rpx;
			}
		}
	}

	.shopCenter {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		height: 211rpx;
		background-color: #ffffff;
		padding: 40rpx 34rpx;
		box-sizing: border-box;
		display: flex;

		image {
			width: 130rpx;
			height: 130rpx;
		}

		.bot {
			flex: 1;
			margin-left: 27rpx;

			.botTop {
				display: flex;
				justify-content: space-between;

				image {
					width: 17rpx;
					height: 10rpx;
					margin-left: 10rpx;
				}
			}
		}
	}

	.box {
		.boxTop {
			height: 100rpx;
			line-height: 100rpx;
			background-color: #eeeeee;
			display: flex;
			justify-content: space-evenly;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			border-bottom: 2rpx solid #cccccc;
		}

		.boxbot {
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			background-color: #eeeeee;
			color: #666666;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			justify-content: space-between;
			padding-left: 106rpx;
			padding-right: 160rpx;

			.boxCenter {
				position: relative;
				left: 30rpx;
			}
		}
	}

	.remark {
		height: 110rpx;
		padding: 40rpx 29rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		display: flex;
		margin-top: 20rpx;

		input {
			height: 100%;
			flex: 1;
			margin-left: 40rpx;
		}
	}

	.bott {
		width: 100%;
		height: 110rpx;
		line-height: 110rpx;
		position: fixed;
		bottom: 0;
		background-color: #ffffff;
		padding: 0 33rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;

		image {
			width: 44rpx;
			height: 44rpx;
			vertical-align: middle;
			margin-right: 20rpx;
		}
	}
</style>
